body > header {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 20px 0;
  box-sizing: border-box;
  background-color: #f3f3f3;
  .search {
    display: flex;
    flex: 1;
    .logo {
      width: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      i[class^='fa'] {
        font-size: 25px;
        color: #f39c12;
      }
    }
    .search-box {
      flex: 1;
      border: solid 1px #ddd;
      font-size: 16px;
      color: #aaa;
      display: flex;
      align-items: center;
      & > div.icon {
        width: 30px;
        display: flex;
        justify-content: center;
      }
    }
    .user {
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i[class^='fa'] {
        font-size: 25px;
        color: #aaa;
      }
    }
  }
  nav {
    flex: 1;
    display: flex;
    align-items: center;
    & > div {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        text-decoration: none;
        color: #aaa;
        font-size: 15px;
        &.active {
          color: #f39c12;
          position: relative;
          &::after {
            content: ' ';
            display: block;
            height: 2px;
            width: 30px;
            background: #f39c12;
            position: absolute;
            bottom: -8px;
          }
        }
      }
    }
    & > i {
      margin-left: 30px;
      color: #aaa;
    }
  }
}
